<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Upload } from "@element-plus/icons-vue";
import type {
  FormInstance,
  FormRules,
  UploadProps,
  UploadUserFile,
} from "element-plus";


const ruleFormRef = ref<FormInstance>();
// do not use same name with ref
const formData = ref<{
  [key: string]: any;
}>({
  // ...authStore.user,
  // password: "123456",
});
const saveLoading = ref(false);

const formRules = reactive<FormRules>({
  nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
});
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      saveLoading.value = true;
      console.log(formData.value);

      setTimeout(() => {
        saveLoading.value = false;
      }, 1000);
    } else {
      console.log("error submit!", fields);
    }
  });
};

const fileList = ref<UploadUserFile[]>([
  {
    name: "element-plus-logo.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
  {
    name: "element-plus-logo2.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
]);

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (_files, _uploadFiles) => {
  // eslint-disable-next-line no-undef
  // ElMessage.warning(
  //   `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
  //   } totally`,
  // );
};

const beforeRemove: UploadProps["beforeRemove"] = (_uploadFile) => {
  // eslint-disable-next-line no-undef
  // return ElMessageBox.confirm(
  //   `Cancel the transfert of ${uploadFile.name} ?`,
  // ).then(
  //   () => true,
  //   () => false,
  // );

  return true
};
</script>

<template>
  <div class="base-settings-container-left">
    <el-form ref="ruleFormRef" :model="formData" :rules="formRules" label-position="top" label-width="120px">
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formData.nickname" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="formData.gender">
          <el-radio value="male">男</el-radio>
          <el-radio value="female">女</el-radio>
          <el-radio value="secrecy">不公开</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input v-model="formData.profile" type="textarea" :rows="4" resize="none" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="formData.phone" disabled />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formData.email" disabled />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="saveLoading" @click="onSubmit(ruleFormRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="base-settings-container-right">
    <el-form :model="formData" label-position="top" label-width="120px">
      <el-form-item label="头像">
        <el-avatar :size="144" :src="formData.avatar" />
      </el-form-item>
      <el-form-item>
        <div style="width: 144px; text-align: center">
          <el-upload v-model:file-list="fileList" class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :on-preview="handlePreview"
            :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed"
            :show-file-list="false">
            <el-button type="primary">
              <span>更换头像</span>
              <el-icon class="el-icon--right">
                <Upload />
              </el-icon>
            </el-button>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.base-settings-container-left {
  min-width: 424px;
  max-width: 648px;
}

.base-settings-container-right {
  flex: 1 1;
  padding-left: 104px;
}
</style>
